<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../../../assets/libs/jquery/jquery-3.6.1.min.js"></script>
</head>

<body>
  <button id="before">before</button>
  <button id="after">after</button>
  <button id="prepend">prepend</button>
  <button id="append">append</button>

  <div style="border: 1px solid black;">Hello world!</div>

  <script>
    function createJElem() {
      return $(`<p>${new Date().toString()}</p>`)
    }

    function before() {
      // beforebegin
      $('div').before(createJElem())
    }

    function after() {
      // afterend
      $('div').after(createJElem())
    }

    function prepend() {
      // afterbegin
      $('div').prepend(createJElem())
    }

    function append() {
      // beforeend
      $('div').append(createJElem())
    }

    $('#before').click(before)
    $('#after').click(after)
    $('#prepend').click(prepend)
    $('#append').click(append)
  </script>
</body>

</html>